<template>
    <div class="more">
        <div class="item" v-for="item in list" :key="item.title" :style="`background-image: linear-gradient(135deg, ${item.colors[0]}, ${item.colors[1]})`" @click="toDetail(item)">{{ item.title }}</div>
    </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
const router = useRouter()
const list = ref([
    {
        title: '生活窍门',
        key: 'qiaomen',
        colors: ['#c4e0e5', '#4ca1af']
    },
    {
        title: '毒鸡汤',
        key: 'dujitang',
        colors: ['#ee93a7', '#ffdde1']
    },
    {
        title: '打工人',
        key: 'dgrl',
        colors: ['#00dbde', '#f902ff']
    },
    {
        title: '彩虹屁',
        key: 'caihongpi',
        colors: ['#dd8dd8', '#f5bda1']
    },
    {
        title: '文化谚语',
        key: 'proverb',
        colors: ['#fdd819', '#f2aa9d']
    },
])
const toDetail = (item) => {
    router.push({
        path: '/detail',
        query: {
            title: item.title,
            key: item.key,
            colors: item.colors
        }
    })
}
</script>

<style lang="scss" scoped>
.more {
    width: 100vw;
    height: calc(100vh - 50px);
    padding-top: 20px;
    background-image: linear-gradient(135deg, rgb(245, 247, 250, .5) 0%, rgb(195, 207, 226, .5) 100%);

    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    background-color: #fcfcfc;

    .item {
        width: 96vw;
        height: 12%;
        border-radius: 10px;
        color: #fff;
        font-weight: 800;
        font-size: 26px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}
</style>